<template>
  <div class="container-fluid standard-bg">
      <div class="col-lg-1"></div>
      <div class="main-content col-lg-10">
        <div id="anime" class="container-fluid col-lg-12 anime">
          <div class="container-fluid">
            <section id="cur-view">
              <ul class="anime-sort">
                <li class="anime-sort-item" v-for="item in sortList" :key="item.id" :class="{'active': item.parent}" @click="handleSort(item.id)">
                  <div class="anime-sort-title">{{ item.title }}</div>
                  <div class="anime-sort-select">
                    <div class="fa fa-sort-asc" :class="{'active': item.child}"></div>
                    <div class="fa fa-sort-desc" :class="{'active': !item.child}"></div>
                  </div>
                </li>
              </ul>

              <!-- SIDEBAR -->
              <div id="anime-ranking-list" class="col-lg-4 hidden-xs anime-ranking-list">
                <aside class="dark-bg sidebar">
                  <article>
                    <h2 class="icon"><i class="fa fa-signal" aria-hidden="true"></i>筛选</h2>
                    <div class="anime-sort-box">
                      <span class="anime-sort-title">类型</span>
                      <ul class="anime-sort">
                        <li class="anime-sort-item selected">全部</li>
                        <li class="anime-sort-item">正片</li>
                        <li class="anime-sort-item">电影</li>
                        <li class="anime-sort-item">其他</li>
                      </ul>
                    </div>
                    <div class="anime-sort-box">
                      <span class="anime-sort-title">地区</span>
                      <ul class="anime-sort">
                        <li class="anime-sort-item selected">全部</li>
                        <li class="anime-sort-item">日本</li>
                        <li class="anime-sort-item">其他</li>
                      </ul>
                    </div>
                  </article>
                </aside>
              </div>

              <!-- MAIN CONTENT -->
              <div class="col-lg-8 col-md-12">
                <div class="row auto-clear anime-list" v-if="pagination.totalNum > 0">
                  <transition-group name="kerwin">
                    <Video5 v-for="item in allVideoList" :key="item.id" :message="item.data"></Video5>
                  </transition-group>
                </div>
                <Pagination :message="pagination" v-if="pagination.totalNum > 0"></Pagination>
                <div v-if="pagination.totalNum <= 0" class="no-data">
                  <div>
                    <img src="../../assets/img/404/404.jpg" alt="没有数据">
                  </div>
                  <div class="btn btn-primary btn-lg" @click="reset()">重置筛选</div>
                </div>
              </div>

            </section>
          </div>
          <!-- LINE -->
          <div id="channels-block" class="container-fluid channels-bg"></div>
        </div>
      <div class="col-lg-1"></div>
      <div class="clearfix"></div>
    </div>

  </div>
</template>

<script>
import Indicators from '../../components/Indicators'
import Video3 from '../../components/video/Video3'
import Video5 from '../../components/video/Video5'
import Pagination from '../../components/Pagination'
import {getAllList, initQuery, defaultPath, initAnime} from './anime-js'

export default {
  name: 'Anime',
  components: {Pagination, Video5, Video3, Indicators},
  data () {
    return {
      urlPage: 0, // 当前页面
      data: '', // 后端请求发送参数
      dataArr: [
        {page: 1, rows: 20, sort: 0},
        {page: 1, rows: 20, sort: 0},
        {page: 1, rows: 20, sort: 0}
      ],
      sortSelected: 0,
      sortList: [],
      sortLists: [
        [
          {id: 0, title: '追番人数', parent: true, child: true},
          {id: 1, title: '更新时间', parent: false, child: true},
          {id: 2, title: '最高评分', parent: false, child: true},
          {id: 3, title: '播放数量', parent: false, child: true},
          {id: 4, title: '开播时间', parent: false, child: true}
        ],
        [
          {id: 0, title: '追番人数', parent: true, child: true},
          {id: 1, title: '更新时间', parent: false, child: true},
          {id: 2, title: '最高评分', parent: false, child: true},
          {id: 3, title: '阅读数量', parent: false, child: true},
          {id: 4, title: '开始时间', parent: false, child: true}
        ],
        [
          {id: 0, title: '追书人数', parent: true, child: true},
          {id: 1, title: '更新时间', parent: false, child: true},
          {id: 2, title: '最高评分', parent: false, child: true},
          {id: 3, title: '阅读数量', parent: false, child: true},
          {id: 4, title: '开始时间', parent: false, child: true}
        ]
      ],
      allVideoList: [],
      pagination: {currentPage: 1, totalPage: 16, path: '', totalNum: 500}
    }
  },
  mounted () {
    this.init()
    for (let i = 0; i < 20; i++) {
      const video = {id: i, data: {cover: null, href: '#', name: 'NULL', tag: 2, status: 0, allNum: 0, refreshNum: 0}}
      this.allVideoList.push(video)
    }
  },
  methods: {
    init () {
      // 确认当前页面
      const urlPage = {anime: 0, manga: 1, novel: 2}
      this.urlPage = urlPage[this.$route.name]
      this.sortList = this.sortLists[this.urlPage]
      // 数据初始化
      this.data = this.dataArr[this.urlPage]
      initQuery(this)
      getAllList(this)
    },
    reset () {
      this.$router.push(defaultPath(this))
    },
    handleSort (val) {
      if (val === this.sortSelected) {
        this.sortList[val].child = !this.sortList[val].child
        this.pagination.totalPage = this.pagination.totalPage + 1
      } else {
        this.sortList[this.sortSelected].parent = false
        this.sortList[val].parent = true
        this.sortSelected = val
      }
      let path
      if (this.urlPage === 0) {
        path = initAnime(this)
      }
      this.$router.push(path)
    }
  },
  watch: {
    '$route': {
      handler: function () {
        this.init()
        scroll(0, 0)
      }
    }
  }
}
</script>

<style scoped>
  .kerwin-enter-active {
    animation: aaa 0.5s;
  }
  .kerwin-leave-active {
  }
  @keyframes aaa {
    0% {
      opacity: 0;
      transform: translateX(40px);
    }
    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }
</style>
